<template>
  <div class="main">
    <section>
      <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="right" label-width="120px">
        <el-row :gutter="50">
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item label="申购单号:" prop="applyNo">
              <el-input @keyup.enter.native="search" v-model="listQuery.applyNo" placeholder="申购单号" maxlength="50" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item label="申购人:" prop="applyRealName">
              <el-input @keyup.enter.native="search" v-model="listQuery.applyRealName" placeholder="申购人" maxlength="50" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item label="申购人手机号:" prop="applyMobile">
              <el-input @keyup.enter.native="search" v-model="listQuery.applyMobile" placeholder="申购人手机号" maxlength="50" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item label="审批状态:" prop="approvalStatus">
              <el-select v-model="listQuery.approvalStatus" clearable>
                <el-option  label="全部" :value="0"></el-option>
                <el-option  label="待审批" :value="1"></el-option>
                <el-option  label="审批通过" :value="2"></el-option>
                <el-option  label="审批驳回" :value="3"></el-option>
                <el-option  label="撤销" :value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item label="审批单提交时间:" prop="seriesType">
              <el-date-picker
                v-model="listQuery.datetimerange"
                type="datetimerange"
                range-separator="~"
                start-placeholder="开始时间"
                end-placeholder="结束时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="" class="btn-item">
          <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
          <span class="btn-reset" @click="resetForm('searchForm')">清空搜索条件</span>
        </el-form-item>
      </el-form>
      <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
        <el-table-column align="center" label="序号" type="index" width="50" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="申购单号" prop="applyNo" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="申购人" width="100">
          <template slot-scope="scope">
            <span>{{scope.row.applyRealName?scope.row.applyRealName:'—'}} </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="申购人手机号" prop="applyMobile"></el-table-column>
        <el-table-column align="center" label="申购人昵称" prop="applyNickname" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="上级审批人" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{scope.row.approvalRealName?scope.row.approvalRealName:'—'}} </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="审批人手机号" prop="approvalMobile" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="审批人昵称" prop="approvalNickname" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="申购单提交时间" width="156">
          <template slot-scope="scope">
            <span>{{formatDate(scope.row.createdAt, 'YYYY-MM-DD HH:mm:ss')}} </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="审批状态" width="120">
          <template slot-scope="scope">
            <span>
              {{scope.row.approvalStatus===1?'待审批':scope.row.approvalStatus===2?'审批通过':scope.row.approvalStatus===3?'审批驳回':'撤销'}}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="审批时间" width="156">
          <template slot-scope="scope">
            <span>{{formatDate(scope.row.approvaledAt, 'YYYY-MM-DD HH:mm:ss')}} </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="160" v-if="rightsButtons['view'] || rightsButtons['remind']">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" plain @click="handleView(scope.row)" v-if="rightsButtons['view']">查看</el-button>
            <el-button type="danger" size="mini" plain @click="handleRemind(scope.row)" v-if="rightsButtons['remind']&&scope.row.approvalStatus===1">提醒</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="listQuery.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal">
      </el-pagination>
    </section>
    <el-dialog title="申购单信息" :visible.sync="detailDialog" class="detail-dialog">
      <el-form label-width="140px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="申购单号：">
              <span>{{viewDetail.applyNo}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上级审批人：">
              <span>{{viewDetail.approvalRealName?viewDetail.approvalRealName:'—'}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申购人：">
              <span>{{viewDetail.applyRealName?viewDetail.applyRealName:'—'}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上级审批人手机号：">
              <span>{{viewDetail.approvalMobile}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申购人手机号：">
              <span>{{viewDetail.applyMobile}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上级审批人昵称：">
              <span>{{viewDetail.approvalNickname}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申购人昵称：">
              <span>{{viewDetail.applyNickname}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审批时间：">
              <span>{{formatDate(viewDetail.approvaledAt, 'YYYY-MM-DD HH:mm:ss')}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申购时间：">
              <span>{{formatDate(viewDetail.createdAt, 'YYYY-MM-DD HH:mm:ss')}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审批状态：">
              <span style="color:red">{{viewDetail.approvalStatus===1?'待审批':viewDetail.approvalStatus===2?'审批通过':viewDetail.approvalStatus===3?'审批驳回':'撤销'}}<span v-show="viewDetail.approvalStatus===3">（驳回原因：{{viewDetail.rejectReason}}）</span></span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申购人家族链路：">
              <span style="color:red">{{viewDetail.userInfoLevelLink	}}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <h3 class="title">申购单商品明细</h3>
      <el-table :data="tableData" border highlight-current-row>
        <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
        <el-table-column label="箱起活动名称" prop="seriesName" align="center"></el-table-column>
        <el-table-column label="起售金额" prop="beginMoney" align="center"></el-table-column>
        <el-table-column label="数量" prop="goodsNumber" align="center"></el-table-column>
        <el-table-column label="总价" prop="payTotalAmt" align="center"></el-table-column>
        <el-table-column label="上级审批人库存" prop="stockNumber" align="center"></el-table-column>
      </el-table>
      <!-- 审批单商品明细 -->
      <el-table :data="orderPriceList" :show-header="false" border>
        <el-table-column align="center" label="名称" width="170" prop="name"></el-table-column>
        <el-table-column align="right" label="金额">
          <template slot-scope="scope">
            <span>￥{{scope.row.money | money}}</span>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailDialog = false">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog title="提醒" :visible.sync="dialogRemind" width="30%">
      <el-form :model="remindForm" ref="remindForm" label-width="0">
        <h5 style="margin-bottom: 20px">将对该用户发起一条短信提醒，消息内容如下：</h5>
        <el-form-item label="" prop="message">
          <el-input
            type="textarea"
            :rows="2"
            v-model="remindForm.message" disabled>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogRemind = false">取 消</el-button>
        <el-button type="primary" @click="remindSure('remindForm')">确定发送</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'orderQuery',
    data() {
      return {
        tableData: [],
        orderPriceList: [],
        viewDetail: {},
        dialogRemind: false,
        remindForm: {
          message: '您有待处理的箱起审批单，请及时处理，若商品库存不足，请及时发起申购补货。'
        },
        detailDialog: false,
        listLoading: false,
        listQuery: {
          applyMobile: '',
          applyNo: '',
          applyRealName: '',
          approvalStatus: 0,
          pageIndex: 1,
          pageSize: 10,
          datetimerange: [],
          endTime: '',
          startTime: ''
        },
        list: [],
        listTotal: 0,
        boxStockApplyId: ''
      }
    },
    created() {
      this.getList();
    },
    methods: {
      // 维护库存确定操作
      remindSure (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.request({
              url: '/bsnl-product/box/stock/apply/remind',
              method: 'get',
              params: {
                boxStockApplyId: this.boxStockApplyId
              }
            }).then((res) => {
              if (res.code === '000000' || res.code === 200 || res.status === 200) {
                this.$message.success('提醒成功')
                this.dialogRemind = false
              } else {
                this.dialogRemind = true
              }
            }).catch(err => {
              console.log(err);
            })
          } else {
            this.dialogRemind = true
          }
        })
      },
      // 查看申购单详情
      handleView (row) {
        this.detailDialog = true
        this.request({
          url: '/bsnl-product/box/stock/apply/detail',
          method: 'get',
          params: { 
            boxStockApplyId: row.id
          }
        }).then((res) => {
          this.viewDetail = res.data
          this.tableData = [
            {
              seriesName: res.data.seriesName,
              beginMoney: res.data.beginMoney,
              goodsNumber: res.data.goodsNumber,
              payTotalAmt: res.data.payTotalAmt,
              stockNumber: res.data.stockNumber
            }
          ]
          this.orderPriceList =  [
            {
              name: '商品总金额',
              money: res.data.goodsTotalAmt
            },
            {
              name: '邮费',
              money: res.data.postage
            },
            {
              name: '实付款',
              money: res.data.payTotalAmt
            }
          ]
        }).catch(err => {
          console.log(err)
          this.viewDetail = {}
          this.tableData =  []
          this.orderPriceList =  [
            {
              name: '商品总金额',
              money: ''
            },
            {
              name: '邮费',
              money: ''
            },
            {
              name: '实付款',
              money: ''
            }
          ]
        })
      },
      // 提醒
      handleRemind (row) {
        this.dialogRemind = true
        this.boxStockApplyId = row.id
      },
      // 清空搜索条件
      resetForm (formName) {
        this.$nextTick(() => {
          this.listQuery.datetimerange = ['', '']
          this.$refs[formName].resetFields()
        })
      },
      // 获取列表
      getList() {
        let tFlag = this.listQuery.datetimerange && this.listQuery.datetimerange.length
        this.listQuery.startTime = tFlag ? new Date(this.listQuery.datetimerange[0]).getTime():''
        this.listQuery.endTime = tFlag ? new Date(this.listQuery.datetimerange[1]).getTime():''
        this.listLoading = true
        this.request({
          url: '/bsnl-product/box/stock/apply/list',
          method: 'post',
          data: { ...this.listQuery }
        }).then(({data, totalCount}) => {
          this.list = data
          this.listTotal = totalCount
          this.listLoading = false
        }).catch(err => {
          console.log(err)
          this.list = []
          this.listTotal = 0
          this.listLoading = false
        })
      },
      search () {
        this.listQuery.pageIndex = 1
        this.getList()
      },
      handleSizeChange (value) {
        this.listQuery.pageSize = value
        this.getList()
      },
      handleCurrentChange(val){
        this.listQuery.pageIndex = val
        this.getList()
      }
    }
  }
</script>
<style lang="scss" scoped>
.title {
  font-size: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding: 0 0 10px 15px;
}
.detail-dialog {
  /deep/ .el-dialog {
    max-width: 900px!important;
  }
}
</style>